<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${springMacroRequestContext.contextPath}/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
    <#include "/common/top.ftl">
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <#include "/common/left.ftl">
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name"  class="layui-input">
                        </div>

                        <button class="layui-btn" onclick="search()">查询</button>
                        <button class="layui-btn" onclick="addUser()">
                            <i class="layui-icon" >&#xe608;</i> 添加
                        </button>
                    </div>
                </div>


                <table class="layui-table" id="table" lay-filter="bar">

                </table>

                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-mini" lay-event="modifyPassword">修改密码</a>
                    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
                </script>

            </div>
    </div>

    <div class="layui-footer">
      <#include "/common/bottom.ftl">
    </div>
</div>
<script src="${springMacroRequestContext.contextPath}/layui/layui.js"></script>
<script>
    //JavaScript代码区域
     var table,$;
    layui.use(['element','table','jquery'], function(){
        var element = layui.element;
       table = layui.table;
       $ = layui.jquery;
        //第一个实例
        table.render({
            elem: '#table'
            ,height: 315
            ,url: '${springMacroRequestContext.contextPath}/user/page' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名', width:80}
                ,{field: 'account', title: '账号', width: 135, sort: true}
            ]]
        });
    });

    function search() {
        table.reload('table', {
            url: '${springMacroRequestContext.contextPath}/user/page'
            ,where: {
                name:$('input[name="name"]').val()
            } //设定异步数据接口的额外参数
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
            //,height: 300
        });
    }
</script>
</body>
</html>